<template>
  <div id="app">
    <login>
      
      //用户名
      <template #text>
        <div class="ap">
          <p>用户名</p>
          <input type="text" />
        </div>
      </template>


      //密码
      <template #password>
        <div class="ap">
          <p>密码</p>
          <input type="password" />
        </div>
      </template>


      //性别
      <template #sex>
        <div class="ap">
          <p>性别</p>
          <input type="radio" name="sex" value="男" />男
          <input type="radio" name="sex" value="女" />女
        </div>
      </template>


      //爱好
      <template #like>
        <div class="ap">
          <p>爱好</p>
          <input type="checkbox" value="抽烟" />抽烟
          <input type="checkbox" value="喝酒" />喝酒
          <input type="checkbox" value="烫头" />烫头
        </div>
      </template>



      //来自于
      <template #from>
        <div class="ap">
          <p>来自于</p>
          <select>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="南京">南京</option>
          </select>
        </div>
      </template>
    </login>
  </div>
</template>
 
<script>
import login from "./components/login.vue";
export default {
  components: {
    login,
  },
};
</script>

<style scoped>
#app {
  width: 100%;
  border: 1px solid #000;
}
.ap {
  border-bottom: 1px solid #000;
}
</style>